<%
local json = require "luci.json"
local lorasrv_str = luci.sys.exec("srvctrl -s")
local lorasrv_obj = luci.json.decode(lorasrv_str)
local data
if lorasrv_obj and lorasrv_obj.data then
data = lorasrv_obj.data
end


%>
<%+header%>
<style type="text/css">
div.bar{
	float:left;
}
</style>
<script type="text/javascript">
	var data = <%=json.encode(data)%>;
	console.log(data);
	$(document).ready(function(){
		var gateways = data.gwbrs;
		var nwks = data.nwks;
		if( nwks ){
			$("#uptime").html(Math.floor(nwks.uptime / 3600) + " H " + Math.floor(nwks.uptime%3600/60) + " M " + (nwks.uptime%60) + " S");
			$("#mote_nb").html(nwks.mote_nb);
			$("#gwbrs").html(gateways.length);
			$("#join_nb").html(nwks.join_nb);
			$("#join_reject").html(nwks.join_reject);
			$("#uplink_nb").html(nwks.uplink_nb);
			$("#downlink_nb").html(nwks.downlink_nb);
		}

		var colors = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
		var stat = data.nwks;
		var rssiNames = [">-40","-60~-40","-80~-60","-100~-80","-120~-100","<-120"];
		var rssistat = stat.RSSI;
		var rssiPieData = []
		for(var i = 0; i < rssiNames.length;i++){
			rssiPieData.push({ name : rssiNames[i], value : rssistat[i], itemStyle : {
				color: colors[rssiNames.length - i - 1]
			}})
		}
		var RssiOpt = {
			title : {
				text : "<%:RSSI Distribution%>",
				left: 40
			},
			grid :{
				left: 80,
				right: 80
			},
			xAxis :{
				name : "RSSI(dbm)",
				axisLabel : {
					interval : 0,
					rotate : 45
				},
				type : 'category',
				data : [">-40","-60~-40","-80~-60","-100~-80","-120~-100","<-120"].reverse()
			},
			yAxis : {
				name :"Packets",
				type : 'value'
			},
			tooltip : {
				trigger: 'item'
			},
			series : [{
				data : rssiPieData.reverse(),//stat.RSSI.reverse(),
				type : 'bar'
			},{
				data : rssiPieData,
				type : 'pie',
				center : ["87.5%","25%"],
				radius : [ 0, "20%"],
				label : {
					normal : {
						show : false
					}
				},itemStyle:{
					shadowBlur : 5,
					shadowColor: 'rgba(0,0,0,0.5)'
				},
				tooltip : {

					formatter : '{b0} : {d0}%'
				}
			}]
	}

	var RssiChart = echarts.init(document.getElementById('rssi'));
	RssiChart.setOption(RssiOpt);

	var snrdata = [];
	var snrNames = [">5","0~5","-5~0","-10~-5","-15~-10","<-15"]
	for( var i = 0; i <snrNames.length; i++ ){
		snrdata.push({ name : snrNames[i], value : stat.SNR[i], itemStyle : {
			color: colors[snrNames.length - i - 1]
		}});
	};

	var SnrOpt = {
		title : {
			text : "<%:SNR Distribution%>",
			left: 40
		},
		grid :{
			left: 80,
			right: 80
		},tooltip : {
			trigger: 'item'
		},
		xAxis :{
			name : "SNR(dB)",
			axisLabel : {
				interval : 0,
				rotate : 45
			},
			type : 'category',
			data : snrNames.reverse()
		},
		yAxis : {
			name :"Packets",
			type : 'value'
		},
		series : [{
			data : snrdata.reverse(),
			type : 'bar'
		},{
			data : snrdata,
			type : 'pie',
			center : ["87.5%","25%"],
			radius : [ 0, "20%"],
			label : {
				normal : {
					show : false
				}
			},
			itemStyle:{
				shadowBlur : 5,
				shadowColor: 'rgba(0,0,0,0.5)'
			},
			tooltip : {

				formatter : '{b0} : {d0}%'
			}
		}]
	}

	var snrChart = echarts.init(document.getElementById('snr'));
	snrChart.setOption(SnrOpt);

	var drdata = [];
	var drNames = ["DR0","DR1","DR2","DR3","DR4","DR5","DR6","DR7"]
	for( var i = 0; i <snrNames.length; i++ ){
		drdata.push({ name : drNames[i], value : stat.DR[i], itemStyle : {
			color: colors[i]
		}});
	};
	var DrOpt = {
		title : {
			text : "<%:DataRate Distribution%>",
			left: 40
		},tooltip : {
			trigger: 'item'
		},
		grid :{
			left: 80,
			right: 80
		},
		xAxis :{
			name : "DataRate",
			type : 'category',
			data : drNames
		},
		yAxis : {
			name :"Packets",
			type : 'value'
		},
		series : [{
			data : drdata,
			type : 'bar'
		},{
			data : drdata,
			type : 'pie',
			center : ["87.5%","25%"],
			radius : [ 0, "20%"],
			label : {
				normal : {
					show : false
				}
			},itemStyle:{
				shadowBlur : 5,
				shadowColor: 'rgba(0,0,0,0.5)'
			},
			tooltip : {

				formatter : '{b0} : {d0}%'
			}
		}]
	}

	var DRChart = echarts.init(document.getElementById('dr'));
	DRChart.setOption(DrOpt);

	var end = stat.uplink.endtime;
	var T = [];
	var up = [];
	var down = [];
	var step = stat.uplink.step
	for( var i = stat.uplink.data.length - 1; i > 0; i-- ){
		var date = new Date((end - (i - 1) * step)*1000)
		T.push(date.format("hh:mm"));
		up.push(stat.uplink.data[stat.uplink.data.length - i - 1])
		down.push(stat.downlink.data[stat.downlink.data.length - i - 1])
	}
	T.push(new Date((end + step)*1000).format("hh:mm"));
	up.push(stat.uplink.data[stat.uplink.data.length - 1]);
	down.push(stat.downlink.data[stat.downlink.data.length - 1]);
	console.log("up", up);
	console.log(T);
	var options = {
		grid :{
			left: 80,
			right: 80
		},tooltip : {
			trigger: 'item'
		},
		title : {
			text : "<%:Traffic History%>",
			left: 40
		},
		legend : {
			data : [{name : "Uplink"},{name : "Downlink"}]
		},
		xAxis : {
			name : 'Time',
			type : 'category',
			data : T
		},
		yAxis : {
			name : 'packets',
			type : 'value'
		},
		series : [{
			name : 'Uplink',
			data : up,
			type : 'line'
		},{
			name : 'Downlink',
			data : down,
			type : 'line'
		}],
		animation : false
	}
	var TimeChart = echarts.init(document.getElementById('TimeCharts'));
	TimeChart.setOption(options);
});
Date.prototype.format = function(format) {
	var o = {
		"M+": this.getMonth() + 1, 
		"d+": this.getDate(), 
		"h+": this.getHours(), 
		"m+": this.getMinutes(), 
		"s+": this.getSeconds(), 
		"q+": Math.floor((this.getMonth() + 3) / 3), 
		"S": this.getMilliseconds() 
	}

	if (/(y+)/.test(format)) {
		format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	}

	for (var k in o) {
		if (new RegExp("(" + k + ")").test(format)) {
			format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
		}
	}
	return format;
}
</script>
<style type="text/css">
div.section{
	width: 100%;
	float:left;
	margin-bottom:40px;
}
div.section > div{
	padding-left:40px;
	padding-right:40px;

}
div.section h4{
	font-size:18px;
	font-weight: bolder;
	color:#555;

}
div.row{

}
div.col{
	float:left;

}
div.col.col-5{
	width:50%;
}
div.col.col-3{
	width:33.333333%;
}
dd{
	padding:14px 12px;
	background: #fbfbfc;
	font-size:16px;
	border-right:1px solid #ecedee;
	border-bottom: 1px solid #ecedee;
	color:#333;
}
dt{
	padding:14px 12px;
	background: #fff;
	font-size:16px;
	border-right:1px solid #ecedee;
	border-bottom: 1px solid #ecedee;
	color:#333;
	height: 16px;
}
div.t > div.row:first-child > div.col > div.row > div.col > dd,
div.t > div.row:first-child > div.col > div.row > div.col > dt{
	border-top: 1px solid #ecedee;
}

div.t > div.row> div.col:first-child > div.row > div.col:first-child > dd,
div.t > div.row> div.col:first-child > div.row > div.col:first-child > dt{
	border-left: 1px solid #ecedee;
}
</style>
<h2><a id="content" name="content"><%:LoRa Network Server Status%></a></h2>
<fieldset class="cbi-section">
	<legend>Network</legend>
	<div class="section" >
		<div><h4><%:Basic Infomation%></h4></div>
		<div class="t">
			<div  class="row">
				<div class="col col-3">
					<div class="row">
						<div class="col col-5"><dd><%:Uptime%></dd></div><div class="col col-5"><dt id="uptime"></dt></div>
					</div>
				</div>
				<div class="col col-3">
					<div class="row">
						<div class="col col-5"><dd><%:Devices%></dd></div><div class="col col-5"><dt id="mote_nb"></dt></div>
					</div>
				</div>
				<div class="col col-3">
					<div class="row">
						<div class="col col-5"><dd><%:Gateways%></dd></div><div class="col col-5"><dt id="gwbrs"></dt></div>
					</div>
				</div>
			</div>
			<div  class="t row">
				<div class="col col-3">
					<div class="row">
						<div class="col col-5"><dd><%:Total Uplink%></dd></div><div class="col col-5"><dt id="uplink_nb"></dt></div>
					</div>
				</div>
				<div class="col col-3">
					<div class="row">
						<div class="col col-5"><dd><%:Total OTAA Request%></dd></div><div class="col col-5"><dt id="join_nb"></dt></div>
					</div>
				</div>
				<div class="col col-3">
					<div class="row">
						<div class="col col-5"><dd><%:Reject OTAA Request%></dd></div><div class="col col-5"><dt id="join_reject"></dt></div>
					</div>
				</div>
			</div>
			<div  class="t row">
				<div class="col col-3">
					<div class="row">
						<div class="col col-5"><dd><%:Total Downlink%></dd></div><div class="col col-5"><dt id="downlink_nb"></dt></div>
					</div>
				</div>
				<div class="col col-3">
					<div class="row">
						<div class="col col-5"><dd><%:Data Downlink%></dd></div><div class="col col-5"><dt id="downlink_data"></dt></div>
					</div>
				</div>
				
			</div>
		</div>
	</div>

	<div style="width:100%;height: 400px">
		<div id="rssi" class="bar" style="width: 33%;height: 100%"></div>
		<div id="snr" class="bar" style="width: 33%;height: 100%"></div>
		<div id="dr" class="bar" style="width: 33%;height: 100%"></div>
	</div>
	<div class="section" id="TimeCharts" style="width:100%;height: 400px"></div>
</fieldset>	
<%+footer%>